title: Claude Code와 Remotion으로 영상 만들기
tags:
- AI영상
- ClaudeCode
- Remotion
- 바이브코딩
source: https://youtu.be/qaYy07CgTGI?si=PqQXOL_uqQLMSsks
date: 2026-07-27
유튜브 영상 「진짜 말 한마디에 영상이 나옵니다」를 바탕으로, Claude Code에 Remotion을 연결해 모션그래픽 영상을 만드는 과정을 초보자용 실행 매뉴얼로 다시 정리했다.
영상 편집 프로그램에서 타임라인을 직접 조작하는 대신, Claude Code가 Remotion(React 기반 영상 제작 도구)의 코드를 작성하고 렌더링하게 한다.
흐름은 단순하다.
아이디어 또는 자료 파일 준비
↓
Claude Code에 원하는 영상 설명
↓
Claude Code가 Remotion 코드 작성
↓
Remotion Studio에서 미리보기
↓
수정 요청 → 다시 렌더링
영상에서 보여준 활용 예시는 다음과 같다.
| 도구 | 역할 |
|---|---|
| Claude Code | 자연어 요청을 코드와 파일 작업으로 변환 |
| Remotion | React로 영상을 구성하고 MP4로 렌더링 |
| Node.js / npm | Remotion 프로젝트 실행 |
| Remotion Studio | 브라우저에서 결과 미리보기 |
| CSV·이미지·텍스트 파일 | 영상에 넣을 실제 자료 |
Remotion 공식 문서의 기본 프로젝트 생성 예시는 다음과 같다.
npx create-video@latest --yes --blank my-video
cd my-video
npm install
npm run dev
Claude Code 전용 Remotion 플러그인을 사용할 경우 공식 문서의 설치 명령은 다음과 같다.
claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion
영상에서는 GitHub 링크를 열고 Claude Code에게 설치 방법을 물은 뒤, 안내된 명령을 복사해 붙여 넣는 방식으로 진행했다. 설치 명령은 도구 버전에 따라 달라질 수 있으므로 공식 문서와 Claude Code의 현재 안내를 함께 확인한다.
터미널에서 영상을 저장할 폴더를 만들고 그 위치에서 Claude Code를 실행한다.
mkdir my-remotion-video
cd my-remotion-video
claude
이미 Remotion 프로젝트가 있다면 새로 만들지 말고 그 프로젝트 폴더에서 claude를 실행한다.
처음부터 명령어를 외우지 않아도 된다. 다음처럼 요청한다.
Remotion을 이 폴더에 설치하는 방법을 알려줘.
현재 프로젝트 구조를 먼저 확인하고, 필요한 명령어를 단계별로 설명해줘.
내가 실행하기 전에 각 명령어의 역할도 짧게 알려줘.
Claude Code가 제안한 명령어를 그대로 실행하기 전에 다음을 확인한다.
npm run dev로 미리보기가 가능한가?영상의 핵심은 복잡한 프롬프트가 아니라 만들고 싶은 결과를 먼저 말하는 것이다.
이 프로젝트로 PPT를 잘 만드는 방법 3가지를 소개하는
30초 세로 모션그래픽 영상을 만들어줘.
각 팁은 한 화면씩 보여주고, 텍스트가 읽기 쉽게 들어가야 해.
더 좋은 결과를 원하면 아래 6가지만 추가한다.
- 화면 비율: 9:16
- 길이: 30초
- 분위기: 깔끔하고 빠른 교육용 모션그래픽
- 핵심 문장: 한 화면에 1개
- 모션: 페이드인, 슬라이드업, 숫자 카운트업
- 출력: 미리보기와 MP4 렌더링 방법까지 안내
Claude Code가 파일을 만들었다고 하면 다음을 요청한다.
Remotion Studio를 실행하고, 내가 브라우저에서 확인할 주소를 알려줘.
완성된 영상의 composition 이름과 미리보기 방법도 알려줘.
영상의 설명처럼 Studio에서는 전체 구성과 결과를 확인할 수 있다. 편집 프로그램처럼 직접 타임라인을 조작하기보다, 문제가 있는 부분을 Claude Code에 다시 말한다.
2번 팁 화면의 글자가 너무 작아.
제목은 더 크게, 본문은 두 줄 이내로 줄이고,
화면 전환은 0.3초 페이드인으로 수정해줘.
데이터 영상은 자료 파일을 프로젝트 폴더 안에 넣고 파일 경로를 Claude Code에 알려준다.
이 폴더의 data/subscribers.csv 파일을 확인해줘.
열에는 date와 subscribers가 있어.
날짜 순서대로 구독자 수가 증가하는 그래프 영상을 만들고,
증가가 큰 구간에는 강조 표시를 넣어줘.
데이터를 읽은 뒤 예상되는 문제도 먼저 알려줘.
파일 경로를 전달하는 방법은 운영체제에서 파일을 우클릭해 경로 복사를 사용하면 된다. 영상에서도 이 방식으로 파일 경로를 복사해 프롬프트에 붙여 넣었다.
영상에서는 배경 음악 생성과 한국어 나레이션도 요청했다. 다만 음성이 사람처럼 완전히 자연스럽지는 않을 수 있으므로 다음 순서가 안전하다.
1. 먼저 영상의 텍스트와 움직임을 완성한다.
2. 음악을 넣고 음량이 목소리를 덮지 않는지 확인한다.
3. 나레이션을 넣고 발음·속도·문장 길이를 확인한다.
4. 어색한 부분은 해당 장면만 다시 생성한다.
영상은 그대로 두고, 한국어 나레이션만 더 짧고 자연스럽게 다시 작성해줘.
한 문장은 12자 안팎으로 하고, 숫자와 영문 약어는 읽기 쉬운 표현으로 바꿔줘.
이 폴더의 Remotion 프로젝트를 확인하고 다음 영상을 만들어줘.
주제: [영상 주제]
길이: [초]
비율: [9:16 또는 16:9]
대상: [누가 보는가]
핵심 내용:
1. [첫 번째 메시지]
2. [두 번째 메시지]
3. [세 번째 메시지]
요구사항:
- 한 화면에 핵심 문장 하나만 보여줘.
- 텍스트가 모바일에서도 읽히도록 크게 만들어줘.
- 장면 사이에 자연스러운 모션을 넣어줘.
- 먼저 파일 구조와 제작 계획을 설명한 뒤 코드를 작성해줘.
- 완성 후 Remotion Studio 미리보기 방법과 MP4 렌더링 명령을 알려줘.
프로젝트 폴더의 [파일 경로]를 읽어줘.
열 이름은 [열 이름]이고, 이 데이터를 날짜 순서대로 보여주는
[초]짜리 세로 인포그래픽 영상을 만들어줘.
그래프는 숫자가 증가하는 흐름이 잘 보이게 하고,
중요한 변곡점에는 라벨과 짧은 설명을 붙여줘.
데이터에 없는 수치는 만들지 말고, 누락·중복·날짜 오류가 있으면 먼저 알려줘.
결과를 확인했어. 아래 부분만 수정해줘.
- 수정할 장면: [예: 3번 장면]
- 문제: [예: 텍스트가 작고 전환이 빠름]
- 원하는 결과: [예: 제목 20% 확대, 전환 0.5초]
나머지 장면과 데이터는 바꾸지 말고, 수정한 파일과 확인 방법을 알려줘.
Remotion 프로젝트를 만들고, Claude Code에 원하는 영상과 자료를 설명한 뒤, 결과를 보면서 장면 단위로 수정하면 된다.